<script setup lang="ts">
import { ref, unref, watch, computed } from "vue"
import { useMousePressed, useMouse, useElementSize,useParentElement  } from "@vueuse/core"
import { IPackAntvX6 } from "../inter";
// import Main from "../main";
// import { Graph } from "@antv/x6";

const props = withDefaults(defineProps<IPackAntvX6.DrawerProps>(), {
    maxSize:"100%",
    minSize:"30%"
})

// const emits = defineEmits<{"update:visible":[visible:boolean]}>()

const {minSize,maxSize,size,visible,vnode } = props;
//
// 父对象
const parentEl = useParentElement()
//
const propName = 'height'
const boxCss = `min-${propName}:${minSize || 'none'};max-${propName}:${maxSize || 'none'};`
const boxRef = ref<HTMLDivElement>();
// 当前鼠标的数据
const { y } = useMouse({ target: parentEl })
const { height: H } = useElementSize(boxRef);

let cv = 0;
let cs = 0;

const operateRef = ref<HTMLElement>()
const { pressed } = useMousePressed({ target: operateRef })
//
const boxSize = computed(() => {
    if (!unref(pressed)) { return  unref(H) };
    const ev =  unref(y);
    const t = (ev - cv) * -1 ;
    return cs + t;
})

const boxStyle = computed(() => {
    const v = (unref(boxSize) || size) + 'px'
    const res = `${propName}:${v};${boxCss}`;
    return res;
})

watch(pressed, (v) => {
    const ev =  unref(y);
    if (v) {
        cv = ev
        cs =  unref(H)
    } else {
        cv = 0;
    }
})

// const currentVNode = adapter.drawer.vnode;
// const currentVNode = computed(() => {
//     const cell = adapter.drawer.currentCell.value;
//     if(!cell){return undefined}
//     const name = cell.
// });
// const init = (graph:Graph) => {
//     // 注册事件
//     graph.on('cell:click',async ({cell}) => {
//         currentVNode.value = undefined;
//         currentVNode.value = await adapter.getDrawerVNode(cell)
//         adapter.openDrawer();
//     })
// }

// 初始化
// adapter.onMounted(init)

// onMounted(() => {
//     main.drawer.close();
// })

</script>

<template>
    <div ref="boxRef" :class="['box-resize-drawer bottom absolute flex overflow-hidden', 'h-50% backdrop-blur-lg z-100',visible?'trans-show':'trans-hide']"  :style="boxStyle"  @click.stop="">
        <div :class="['_line bottom', 'relative z-99 op-30 hover-op-100']">
            <div ref="operateRef" class="flex items-center justify-center select-none lh-6px text-6px fw-bold hover-text-7px w-full h-4px" >
                <b class="cursor-ns-resize">• • • • • •</b>
            </div>
        </div>
        <div v-show="visible" class="relative w-full h-[calc(100%-4px)] box-border p-2 p-t-2" >
            <!-- <Item v-if="currentCell" /> -->
                <component v-if="vnode" :is="vnode" ></component>
                <div v-else class="w-full h-full flex items-center justify-center">
                    <div class="i-svg-spinners:bars-rotate-fade w-3em h-3em"></div>
                </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.box-resize-drawer {
    transition-property: opacity,transform;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    box-shadow:0px 0px 16px rgba(0, 0, 0, .22);
    &.bottom{
        flex-direction: column;
        width:100%;
        bottom:0;
        left:0;
        &.trans-show{
            transform: translateY(0);
            opacity: 1;
        }
        &.trans-hide{
            transform: translateY(100%);
            opacity: 0;
        }
    }
    >._line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &.bottom {
            width: 100%;
        }
    }
}
</style>